<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="`账号管理`"></topTitle>
    <div class="mainCon">
      <el-row class="searchBox searchInputWidth">
        <el-form :inline="true" :model="filterField" ref="accountForm">
          <el-col :lg="8" :xl="6">
            <el-form-item label="单位名称" class="row-padding-bottom">
              <el-input
                placeholder="请输入"
                clearable
                v-model="filterField.name"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="申请时间" class="row-padding-bottom">
              <timeSelection
                @getStartTimeValue="getStartTimeValue"
                @getEndTimeValue="getEndTimeValue"
              ></timeSelection>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="账号状态" class="row-padding-bottom">
                <el-select
                  placeholder="请选择"
                  v-model="filterField.enabled"
                  clearable
                >
                  <el-option label="启用" value="ENABLED" />
                  <el-option label="停用" value="DISABLE" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="审核状态" class="row-padding-bottom">
                <el-select
                  placeholder="请选择"
                  v-model="filterField.status"
                  clearable
                >
                  <el-option label="待审核" value="AUDITING" />
                  <el-option label="已通过" value="APPROVED" />
                  <el-option label="已驳回" value="REJECTED" />
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-form-item>
            <a
              @click="toggleAdvanced"
              style="margin-left: 40px; color: #409eff; cursor: pointer"
              class="btnColor"
            >
              {{ advanced ? '收起' : '展开' }}
              <i
                :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </a>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchTable"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <!-- 列表 -->
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column label="单位名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.name"
                :columnName="'name'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="inputTypeName"
            label="单位类型"
            :formatter="formatTd"
          />
          <el-table-column
            align="center"
            prop="username"
            label="账号"
            width="230"
          >
            <template slot-scope="scope">
              {{ scope.row.username || '-' }}
              <el-switch
                v-if="
                  scope.row.statusName != '待审核' &&
                  scope.row.statusName != '已驳回'
                "
                class="switch"
                v-model="scope.row.enabled"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="ENABLED"
                inactive-value="DISABLE"
                active-text="启用"
                inactive-text="停用"
                @change="changStatus($event, scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="linkman"
            label="负责人姓名"
            :formatter="formatTd"
          />
          <el-table-column
            align="center"
            prop="tel"
            label="负责人手机号"
            :formatter="formatTd"
            width="150"
          />
          <el-table-column
            align="center"
            prop="createTime"
            label="申请时间"
            :formatter="format"
            width="150"
          />
          <el-table-column
            align="center"
            prop="statusName"
            label="审核状态"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <span
                v-bind:style="{
                  color: scope.row.status == 'REJECTED' ? '#F56C6C' : '',
                }"
                >{{ scope.row.statusName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="操作"
            width="180px"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                v-if="scope.row.status == 'AUDITING'"
                @click="toAudit(scope.row)"
                >审核</el-link
              >
              <el-link type="primary" v-else @click="toDetail(scope.row)"
                >查看详情</el-link
              >
              <el-link type="primary" @click="toDel(scope.row)">删除</el-link>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息" />
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageSize="getpageSize"
          @getpageNo="getpageNo"
        />
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'accountManageList',
  mixins: [scrollTable],
  data() {
    return {
      advanced: false,
      requestUrl: 'api-m/inputUser/base/v1/page', //表格请求路径
      loading: false,
      departmentTypeFun: '正式环境',
      isShow: false,
      tableData: [], //表格数据
      filterField: {
        name: '',
        status: '',
        enabled: '',
        createStartTime: '',
        createEndTime: '',
      },
      pageSize: 20,
      pageNo: 1,
      companyList: [], //项目名称下来列表
      pageSizeNumber: 20,
      total: 0,
      companyId: '',
      addOrEdit: '',
      formVisible: false,
      formData: {
        id: '',
        companyId: '',
        companyName: '',
        pointId: '',
        type: '',
        machineNo: '',
        direction: '',
        authCode: '',
        remark: '',
      },
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },

    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    //列表查询
    searchTable() {
      this.$refs.pagination.getTableListData()
    },
    format(row, column, cellValue) {
      return moment(cellValue).format('YYYY-MM-DD hh:mm')
    },
    /**
     * @description: 获取开始日期
     * @param {*} urls
     * @param {*} datas
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.createStartTime = val
      } else {
        this.filterField.createStartTime = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.createEndTime = val
      } else {
        this.filterField.createEndTime = ''
      }
    },
    toDetail(row) {
      this.$router.push({
        name: 'accountCheckDetailPage',
        path: '/home/interfacePlatform/accountCheckDetailPage',
        query: {
          id: row.id,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/interfacePlatform/accountManageList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toAudit(row) {
      this.$router.push({
        name: 'accountCheckPage',
        path: '/home/interfacePlatform/accountCheckPage',
        query: {
          id: row.id,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/interfacePlatform/accountManageList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toDel(row) {
      this.$confirm('账号删除后，用户将无法登录系统，是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.toDelete(row.id)
        })
        .catch(() => {})
    },
    toDelete(id) {
      this.axios({
        method: 'post',
        url: 'api-m/inputUser/base/v1/delete',
        data: {
          id: id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '删除成功',
            })
            this.$refs.pagination.getTableListData()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {})
    },
    changStatus(event, row) {
      const vm = this
      if (event == 'DISABLE') {
        const h = this.$createElement
        this.$msgbox({
          title: '提示',
          message: h('p', null, [
            h('span', null, '此操作将'),
            h('span', { style: 'color: #FF4949' }, '停用'),
            h('span', '该账号?'),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              row.enabled = 'DISABLE'
              this.enable(row.id, event, done)
            } else {
              row.enabled = 'ENABLED'
              done()
            }
          },
        }).then((action) => {})
      } else {
        const h = this.$createElement
        this.$msgbox({
          title: '提示',
          message: h('p', null, [
            h('span', null, '此操作将'),
            h('span', { style: 'color: #98F203' }, '启用'),
            h('span', '该账号?'),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              row.enabled = 'ENABLED'
              this.enable(row.id, event, done)
            } else {
              row.enabled = 'DISABLE'
              done()
            }
          },
        }).then((action) => {})
      }
    },
    enable(id, enable, done) {
      this.axios({
        method: 'post',
        url: 'api-m/inputUser/base/v1/enable',
        data: {
          id: id,
          enable: enable,
        },
      })
        .then((response) => {
          done()
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '保存成功',
            })
            this.$refs.pagination.getTableListData()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .selectWidth {
    width: 100%;
  }

  .titleBox {
    border: none;
    background: #e4ebf1;
    padding: 14px 24px;
    margin-bottom: 0px;

    .listAddBtn {
      width: 136px;
      background: #009588;
      border: none;
    }

    .listAddBtn:hover {
      background: #009588;
      border-color: #009588;
      opacity: 0.8;
    }

    .blockTitle {
      font-weight: bold;
      font-size: 18px;
      color: #333;
      line-height: 40px;
    }
  }
}
/deep/ .el-tag {
  line-height: 23px;
  height: 23px;
}
/* switch按钮样式 */
/deep/.switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}
/*打开时文字位置设置*/
/deep/.switch .el-switch__label--right {
  z-index: 1;
}
/* 调整打开时文字的显示位子 */
/deep/.switch .el-switch__label--right span {
  margin-right: 9px;
}
/*关闭时文字位置设置*/
/deep/.switch .el-switch__label--left {
  z-index: 1;
}
/* 调整关闭时文字的显示位子 */
/deep/.switch .el-switch__label--left span {
  margin-left: 9px;
}
/*显示文字*/
/deep/.switch .el-switch__label.is-active {
  display: block;
}
/* 调整按钮的宽度 */
/deep/.switch.el-switch .el-switch__core,
/deep/.el-switch .el-switch__label {
  width: 70px !important;
  margin: 0;
}
@import '../../../static/css/filterArea.less';
</style>
